<template>
  <div class="revise-avatar">
    <!--  @click="showImg" -->
    <div class="avatar">
      <!-- <img v-if="newHeadImg || oldHeadImg" :src="newHeadImg ? newHeadImg : host + oldHeadImg" alt />

      <img v-else :src="defaultAvatar" alt />-->

      <uploader :max-count="1" v-model="headList" :after-read="afterRead" />
    </div>
    <div class="tip">(仅支持 jpg,jpeg,png)</div>

    <div class="upload">
      <div class="operation">
        <!-- <p @click="chooseImages">
          <van-button type="info">选择图片</van-button>
        </p>-->
        <p @click="setHeadImg">
          <van-button type="info" icon="upgrade" size="large" :disabled="isSubmitting" >{{isSubmitting ? '正在提交' : '上传'}}</van-button>
        </p>
      </div>
      <!-- <input id="upload" type="file" hidden @change="getFile" /> -->
    </div>
  </div>
</template>

<script>
import { Icon, Button, Toast, ImagePreview, Uploader } from "vant";
import { fileToBase64, uploadImgBatch_flie } from "../service/toBase64.js";
import http from "../service/myHttp.js";
import urls from "../service/url.js";
import { mapState } from "vuex";
import { staticHost } from "../service/HOST.js";
import { defaultAvatar } from "../service/default_source.js";

export default {
  components: {
    Icon,
    vanButton: Button,
    Uploader
  },
  data() {
    return {
      headList: [],
      host: staticHost,
      defaultAvatar,
      // newHeadImg: null,
      // oldHeadImg: null,
      defaultFile: require("../img/我的授权@2x.png"),
      isSubmitting: false
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.login_module.userinfo,
      countAlias: "userInfo"
    })
  },
  mounted() {
    // 获取用户原头像
    this.getHeadImg();
  },
  methods: {
    // 预览头像
    // showImg() {
    //   ImagePreview([
    //     this.newHeadImg ? this.newHeadImg : this.host + this.oldHeadImg
    //   ]);
    // },

    // 上传头像
    setHeadImg() {
      if (this.headList.length == 0) {
        Toast("请先选择图片");
        return false;
      }
      console.log("图片：", this.headList);

      this.isSubmitting = true
      return http
        .post(urls.XGTXMM, {
          headImg: this.headList[0].content,
          id: this.userInfo.id
        })
        .then(res => {
          this.isSubmitting = false
          if (res.data.code == 200) {
            Toast.success("修成头像成功");

            setTimeout(() => {
              this.headList = []
              this.getHeadImg();
            }, 1000);
          }
        });
    },

    // 获取头像
    getHeadImg() {
      http
        .post(urls.DLXQ, {
          id: this.userInfo.id
        })
        .then(res => {
          if (res.data.code == 200) {
            let data = res.data.data;
            // this.oldHeadImg = data.head_img;
            this.headList.push({
              url: staticHost + data.head_img,
              isImage: true
            });
            let user = JSON.parse(localStorage.getItem("userInfo"));
            user.headImg = data.head_img;
            localStorage.setItem("userInfo", JSON.stringify(user));
            this.$store.commit("setUserInfoFromLocalStorage", user);
          }
        });
    },
    afterRead() {},

    // 点击选择图片
    chooseImages() {
      document.getElementById("upload").click();
    },

    //图片转格式
    async getFile(e) {
      await fileToBase64(e.target.files[0]).then(res => {
        this.newHeadImg = res;
      });
    }
  }
};
</script>

<style scoped>
.revise-avatar {
  background-color: #fff;
  padding-top: 30px;
}

.avatar {
  display: flex;
  justify-content: center;
}

.avatar img {
  width: 210px;
  height: 210px;
  border: 1px solid var(--line-between-color);
}

.tip {
  margin-top: 10px;
  text-align: center;
}

.operation {
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 0 auto;
  padding: 30px 0;
}

.operation p {
  width: 100%;
}
</style>

<style>
.revise-avatar .van-uploader__upload,
.revise-avatar .van-uploader__preview-image {
  width: 210px;
  height: 210px;
}

.revise-avatar .van-uploader__upload{
  border: 4px dashed #e5e5e5;
}

.revise-avatar .van-uploader__upload-icon{
  font-size: 5rem;
}

</style>